<template >
  <div v-bind:total="total" class="inline">
    <el-input class="wd80" size='mini' :disabled='isdisable' v-model="min" :class="{'mmerror': max!=='' &&min>max}" @change="minChange($event)" placeholder="最小值"></el-input><span class="mm-text">{{text}}</span>
		<el-input class="wd80" size='mini' :disabled='isdisable' v-model="max" :class="{'mmerror': max!==''&& max<min}" @change="maxChange($event)" placeholder="最大值"></el-input>
 		<span v-if="remarks" >&nbsp;&nbsp;{{remarks}}</span>
 		<span v-if="min==max">
 			<span v-if="min!==''" class="maxcol">&nbsp;&nbsp;等于 {{min}}{{remarks}}</span>
 		</span>
 		<span v-else>
 			<span v-if="min!=''" class="maxcol">&nbsp;&nbsp;大于等于 {{min}}{{remarks}}</span>
 			<span v-if="max!=''" class="maxcol">&nbsp;&nbsp;小于 {{max}}{{remarks}}</span>
 		</span>
 		
  </div>
</template>


<script>
	import api from '@/api/api.js'
export default {
  name: "minmax",
  props: {
    model: String,
    text: String,
    maxnum:Number,
    isdisable:Boolean,
    remarks:String,
  },

  computed: {
    total: function() {
      console.log(this.$store.state);
      let total = this.min + "-" + this.max;
      this.$emit("total", total);
      if (this.min !== "" && this.max !== "" && this.min > this.max) {
        this.$emit("error", true);
      } else {
        this.$emit("error", false);
      }
      return total;
    }
  },
  data() {
    return {
      data: "",
      min: "",
      max: ""
    };
  },
  mounted() {
    let numbers = this.model;
    if (numbers) {
      let ind = numbers.indexOf("-");
      let min = numbers.substring(0, ind);
      let max = numbers.substring(ind + 1);
      if (min !== "") {
        this.min = Number(min);
      }
      if (max !== "") {
        this.max = Number(max);
      }
    }
  },
  methods: {
   
    minChange(event) {
      let min = api.clearNoNum(event,100,1);
      this.min = min;
    },
    maxChange(event) {
      let max = api.clearNoNum(event,100,1);
      this.max = max;
    }
  }
};
</script>

<style lang='scss' scoped>
.wd80 {
  width: 80px;
}
.inline {
  display: inline-block;
}
.mm-text{margin:0 10px;}
.maxcol{
	color:#CBCBCB;
}
</style>
